<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热词</title>
    <script src="../../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
            background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));
    var titleData = "2017年西安市技术合同技术领域成交构成";

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2011: [ 318, 50, 73,8,20, 185,38,5,49,60,63],
            2012: [ 150,70,71,3,3,195,10,3,2,68,100],
            //到访人数
            1: [ 10200,1100,3100,400,700,2800,780,160,150,3900,5900],
            2: [6950,2050,1900,50,450,1900,450,40,60,750,5555],
        };

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '电子信息技术','航空航天技术', '先进制造技术','生物、医药和医疗器械技术','新材料及其应用',' 新能源与高效节能', '环境保护与资源综合利用技术','核应用技术', '农业技术','现代交通', '城市建设与社会发展'
                    ]
                },
                legend: {
                    left: '5%',
                    top:'10%',
                    data: ['2017年成交额', '2017年合同数','2016年成交额', '2016年合同数'],
                    textStyle: {
                        color: '#fff',
                        fontSize:16
                    },
                    itemWidth:15,
                    itemHeight:10
                },
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                      type: 'shadow',
                    }
                  },
                 grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '7%',
                    top:'27%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: -30,
                            formatter:function(value)  
                               {  
                                    if (value.length>4) {  
                                        return value.substring(0,4)+"...";  
                                    }  
                                    else {  
                                        return value;  
                                    } 
                               } ,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: [
                       '电子信息技术','航空航天技术', '先进制造技术','生物、医药和医疗器械技术','新材料及其应用',' 新能源与高效节能', '环境保护与资源综合利用技术','核应用技术', '农业技术','现代交通', '城市建设与社会发展'
                         ]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        // min: 0,
                        // max: 50,
                        name:'亿元',
                        nameTextStyle: {
                            color: "#FFF",
                            verticalAlign:'bottom',
                            fontSize:16
                        },
                        //interval: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        // max: 100,
                        // min: 0,
                        name:'份数',
                        nameTextStyle: {
                            color: "#FFF",
                            verticalAlign:'bottom',
                            fontSize:16
                        },
                        //interval: 150,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }

                ],
                series: [
                    {name: '2017年成交额', type: 'bar',barWidth : 15,barGap:0,data: dataMap.dataVisit['2011'],
                            itemStyle: {
                                normal: {
                                    color: '#0c8bd1',
                                    fontSize: 22
                                }
                            }},
                    {name: '2017年合同数', type: 'line', smooth: true,yAxisIndex: 1,
                            data: dataMap.dataVisit['1'],
                            itemStyle: {
                                normal: {
                                    color: '#f8849b',
                                    fontSize: 22
                                }
                            }},
                    {name: '2016年成交额',barGap:0, type: 'bar',barWidth : 15,data: dataMap.dataVisit['2012'],
                            itemStyle: {
                                normal: {
                                    color: '#0de2ff',
                                    fontSize: 22
                                }
                            }},
                    {name: '2016年合同数', type: 'line', smooth: true,yAxisIndex: 1,
                            data: dataMap.dataVisit['2'],
                            itemStyle: {
                                normal: {
                                    color: '#f7e46c',
                                    fontSize: 22
                                }
                            }}
                ]
            },
            options: [
                {
                    title: {
                        text: titleData,
                        left: 'center',
                        top:"0%",
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    }
                }
            ]
        };

        turnover.setOption(barOption);
</script>
</html>